import * as echarts from "echarts";

const offsetX = 20
const offsetY = 10
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint
        // console.log(shape);
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - offsetX, shape.y - offsetY]
        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
    }
})
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
        const c4 = [shape.x + offsetX, shape.y - offsetY]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
        const c3 = [shape.x, shape.y - offsetX]
        const c4 = [shape.x - offsetX, shape.y - offsetY]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})

// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

/**
 * 生成立体柱状图
 * @param dom 图表的容器
 * @param data.XData 图表的X轴数据
 * @param data.barData 图表的柱状图Y轴数据
 * @param data.lineData 图表的折线图Y轴数据
 */
export const initBarCahrts = (dom, data) => {
    const myCharts = echarts.init(dom)
    let option = {
        legend: {
            left: 'center',
            top: 10,
            icon: 'rect',
            itemGap: 30,
            itemWidth: 10,
            itemHeight: 10,
            itemStyle: {
                color: 'inherit',
            },
            data: ["检验数量", "检验人数"],
            textStyle: {
                fontSize: 12,
                fontFamily: 'SourceHanSansCN-Normal, SourceHanSansCN',
                color: '#D3E3FF',
                lineHeight: 18
            },
        },
        color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'rgba(11,158,255, 1)' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(11,158,255, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }, '#43EFFF'],
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: 20 // 字体大小
            },
            axisPointer: {
                type: 'shadow'
            },
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "3%",
            bottom: "10%",
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: data.XData,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(239, 247, 253, .1)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 16,
                color: "#E7FCFF",
                margin: 20,
                formatter: (value) => {
                    console.log(value)
                    let str
                    if(value.length > 4){
                        str = value.slice(0, 4) + '...'
                    }else{
                        str = value
                    }
                    return str
                }
            },
        },
        yAxis: [{
            type: 'value',
            name: '单位（个）',
            nameGap: 30,
            nameTextStyle: {
                color: "#ffffff",
                fontWeight: 400,
                fontSize: 16,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(239, 247, 253, .1)'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(239, 247, 253, .1)',
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 16,
                color: "#E7FCFF"
            },
            min: 0,
            max: Math.ceil(Math.max.apply(null, data.barData) / 5) * 5,
            interval: Math.ceil(Math.max.apply(null, data.barData) / 5)
        }, {
            show: false
        }],
        dataZoom: [{
            show: true,
            height: 12,
            bottom: '5%',
            start: 0,
            end: 20,
            textStyle: {
                color: "#fff"
            }
        }],
        series: [{
            name: "检验数量",
            type: 'custom',
            renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                    type: 'group',
                    children: [
                        {
                            type: 'CubeLeft',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(11,158,255, 1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(11,158,255, 0)'
                                    }
                                ]),
                            }
                        },
                        {
                            type: 'CubeRight',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(11,158,255, 1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(11,158,255, 0)'
                                    }
                                ]),
                            }
                        },
                        {
                            type: 'CubeTop',
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0])
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(11,158,255, 1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(11,158,255, 1)'
                                    }
                                ]),
                            }
                        }
                    ]
                }
            },
            data: data.barData
        }, {
            name: '检验人数',
            type: "line",
            showSymbol: false,
            // smooth: true,
            symbolSize: 0,
            yAxisIndex: 1,
            itemStyle: {
                color: "#01EEFD"
            },
            lineStyle: {
                width: 1,
            },
            data: data.lineData
        }]
    };

    myCharts.setOption(option)
}


/**
 * 生成双向柱状图
 * @param dom 图表的容器
 * @param data.XData 图表的X轴数据
 * @param data.income 收入数据
 * @param data.disburse 支出数据
 */

export const initBidirectionBar = (dom, data) => {
    const myCharts = echarts.init(dom)
    let option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                let str;
                const [a, b] = params
                str = `${a.name} <br/>`
                let aToolTip = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#1978E5;"></span> ${a.seriesName}: ${a.value}万元`

                let bToolTip = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#28B4B4;"></span> ${b.seriesName}: ${Math.abs(b.value)}万元`
                str += aToolTip + '<br/>' + bToolTip
                // let str ; //声明一个变量用来存储数据
                // const [a, b] = params;
                // let a1 = `${a.seriesName}: ${a.value > 0 ? a.value : -a.value}`;
                // let b1 = `${b.seriesName}: ${b.value > 0 ? b.value : -b.value}`;
                // str = a1 + '</br>' + b1;
                return str;
            },
        },
        grid: {
            left: '10%',
            right: '15%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            name:"单位：月",
            nameLocation:'end',
            nameTextStyle: {
                color: "white",
                align:"left"
            },     
            type: 'category',
            axisLabel: {
                color: 'rgba(216, 240, 255, 0.8)',
                fontFamily: 'SourceHanSansCN-Normal, SourceHanSansCN',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(176,215,255,0.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(176,215,255,0.2)'
                }
            },
            axisTick: {
                show: false
            },
            data: data.XData
        }],
        yAxis: [{
            type: 'value',
            name: '单位：万元',
            // min: function (value) {
            //     return Math.floor((value.min - 1000) / 1000) * 1000
            // },
            // max: function (value) {
            //     let max = Math.ceil((value.max + 1000) / 1000)
            //     return max * 1000
            // },
            nameTextStyle: {
                color: '#ffffff'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(176,215,255,0.2)'
                }
            },
            axisLabel: {
                formatter: function (v) {
                    return v > 0 ? v : -v;
                },
                color: 'rgba(216, 240, 255, 0.8)',
                fontFamily: 'SourceHanSansCN-Normal, SourceHanSansCN',
                fontSize: 12
            }
        }],
        series: [
            {
                name: '收入',
                type: 'bar',
                stack: '总量',
                barWidth: 17,
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(255, 255, 255, 0.08)"
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(25, 120, 229, 0.1)'
                    }, {
                        offset: 1,
                        color: 'rgba(25, 120, 229, 0.6)'
                    }])
                },
                data: data.income
            },
            {
                name: '支出',
                type: 'bar',
                stack: '总量',
                barWidth: 17,
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(255, 255, 255, 0.08)"
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(24, 255, 239, 0.6)'
                    }, {
                        offset: 1,
                        color: 'rgba(20, 197, 231, 0.1)'
                    }])
                },
                data: data.disburse
            },
        ]
    };
    myCharts.setOption(option)
}

